<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="EarthUI示例"></meta>
    <title>自定义属性窗口</title>
    <script src="../../XbsjEarthUI/xbsj.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="main">
    </div>

    <script>
        var myTool = {
            props: {
                getBind: Function
            },
            template: `
            <div>
                <Window
                :footervisible="true"
                @cancel="cancel"
                @ok="ok" 
                :width="463"
                :minWidth="202"
                :height="500"
                :left="5"
                :top="138"
                :title="title" 
                v-show="show"
                >
                  <button class='xbsj-button' @click='click'>{{lang.btn}}</button>
                </Window>
            </div>`,
            data() {
                return {
                    show: true,
                    langs: {
                        zh: {
                            title: '自定义窗口',
                            btn: '切换语言'
                        },
                        en: {
                            title: 'custum window',
                            btn: 'Language'
                        }
                    }
                }
            },
            created() {},
            mounted() {
                console.log('my tool mounted');
            },
            methods: {
                click() {
                    this.$root.$earthUI.language = this.$root.$earthUI.language === 'zh' ? 'en' : 'zh';
                },
                ok() {
                    this.$parent.destroyTool(this);
                },
                cancel() {
                    this.$parent.destroyTool(this);
                }
            },
            computed: {
                title() {
                    return this.lang.title + ' [' + this.getBind().name + ']';
                }
            }
        };
    </script>

    <script>
        XbsjEarthUI.create('main').then(earthUI => {


            var obj1 = {
                name: 'obj1'
            };
            earthUI.showPropertyWindow(obj1, {
                component: myTool
            });



            // only for Debug
            window.uia = earthUI;
        });
    </script>
</body>

</html>